<div class="overflow-x-auto">
  <table
    class="gf-table w-100"
    mat-table
    matSort
    matSortActive="name"
    matSortDirection="asc"
    [dataSource]="dataSource"
  >
    <ng-container matColumnDef="name" sticky>
      <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
        <ng-container i18n>Name</ng-container>
      </th>
      <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
        <div class="text-truncate">
          {{ element?.name }}
        </div>
        @if (showSymbol) {
          <div>
            <small class="text-muted">{{ element?.symbol }}</small>
          </div>
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="trend50d">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-2 text-right"
        mat-header-cell
      >
        <ng-container i18n>50-Day Trend</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-2"
        mat-cell
      >
        <div class="d-flex justify-content-end">
          @if (element?.trend50d !== 'UNKNOWN') {
            <gf-trend-indicator
              [value]="
                element?.trend50d === 'UP'
                  ? 0.001
                  : element?.trend50d === 'DOWN'
                    ? -0.001
                    : 0
              "
            />
          }
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="trend200d">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-2 text-right"
        mat-header-cell
      >
        <ng-container i18n>200-Day Trend</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-2"
        mat-cell
      >
        <div class="d-flex justify-content-end">
          @if (element?.trend200d !== 'UNKNOWN') {
            <gf-trend-indicator
              [value]="
                element?.trend200d === 'UP'
                  ? 0.001
                  : element?.trend200d === 'DOWN'
                    ? -0.001
                    : 0
              "
            />
          }
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-2 text-right"
        mat-header-cell
      >
        <ng-container i18n>Last All Time High</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-2"
        mat-cell
      >
        <div class="d-flex justify-content-end">
          @if (element?.performances?.allTimeHigh?.date) {
            <gf-value
              [isDate]="true"
              [locale]="locale"
              [value]="element?.performances?.allTimeHigh?.date"
            />
          }
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="change">
      <th
        *matHeaderCellDef
        class="px-2 justify-content-end"
        mat-header-cell
        mat-sort-header="performances.allTimeHigh.performancePercent"
      >
        <span class="d-none d-sm-block text-nowrap" i18n
          >Change from All Time High</span
        >
        <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
      </th>
      <td *matCellDef="let element" class="px-2 text-right" mat-cell>
        @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
          <gf-value
            class="d-inline-block justify-content-end"
            [isPercent]="true"
            [locale]="locale"
            [ngClass]="{
              'text-danger':
                element?.performances?.allTimeHigh?.performancePercent < 0,
              'text-success':
                element?.performances?.allTimeHigh?.performancePercent === 0
            }"
            [value]="element?.performances?.allTimeHigh?.performancePercent"
          />
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="marketCondition">
      <th *matHeaderCellDef mat-header-cell></th>
      <td *matCellDef="let element" class="px-0" mat-cell>
        @if (element?.marketCondition) {
          <div class="text-center" [title]="translate(element.marketCondition)">
            {{ resolveMarketCondition(element.marketCondition).emoji }}
          </div>
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="actions" stickyEnd>
      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
        @if (hasPermissionToDeleteItem) {
          <button
            class="mx-1 no-min-width px-2"
            mat-button
            [matMenuTriggerFor]="benchmarkMenu"
            (click)="$event.stopPropagation()"
          >
            <ion-icon name="ellipsis-horizontal" />
          </button>
        }
        <mat-menu #benchmarkMenu="matMenu" xPosition="before">
          <button
            mat-menu-item
            [disabled]="!hasPermissionToDeleteItem"
            (click)="
              onDeleteItem({
                dataSource: element.dataSource,
                symbol: element.symbol
              })
            "
          >
            <span class="align-items-center d-flex">
              <ion-icon class="mr-2" name="trash-outline" />
              <span i18n>Delete</span>
            </span>
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr
      *matRowDef="let row; columns: displayedColumns"
      class="cursor-pointer"
      mat-row
      (click)="
        onOpenBenchmarkDialog({
          dataSource: row.dataSource,
          symbol: row.symbol
        })
      "
    ></tr>
  </table>
</div>

@if (isLoading) {
  <ngx-skeleton-loader
    animation="pulse"
    class="px-4 py-3"
    [theme]="{
      height: '1.5rem',
      width: '100%'
    }"
  />
} @else if (benchmarks?.length === 0) {
  <div class="p-3 text-center text-muted">
    <small i18n>No data available</small>
  </div>
}
